import React from "react";
import { Navigate } from "react-router-dom";
import {
  HomeOutlined,
  TableOutlined,
  RadiusSettingOutlined,
  UnorderedListOutlined,
} from "@ant-design/icons";
// 路由懒加载
const Home = React.lazy(() => import("../views/home"));
const Echarts = React.lazy(() => import("../views/echarts"));
const List = React.lazy(() => import("../views/list"));
const Set = React.lazy(() => import("../views/set"));
const Add = React.lazy(() => import("../views/add"));

const MainLayout = React.lazy(() => import("../views/mainLayout"));
const Login = React.lazy(() => import("../views/login"));
const Post = React.lazy(() => import("../views/post"));

// 路由表
export const ROUTER_LIST: RouteRowState[] = [
  {
    path: "/home",
    meta: {
      title: "首页",
      icon: <HomeOutlined />,
    },
    element: (
      <MainLayout>
        <Home></Home>
      </MainLayout>
    ),
  },
  {
    path: "/echarts",
    meta: {
      title: "图表",
      icon: <UnorderedListOutlined />,
    },
    element: (
      <MainLayout>
        <Echarts></Echarts>
      </MainLayout>
    ),
  },
  {
    path: "/list",
    meta: {
      title: '列表',
      icon: <TableOutlined />,
    },
    children: [
      {
        path: "/list/opration",
        meta: {
          title: "列表操作",
          icon: <TableOutlined />,
        },
        element: (
          <MainLayout>
            <List></List>
          </MainLayout>
        ),
      },
      {
        path: "/list/add",
        meta: {
          title: "列表添加",
          icon: <TableOutlined />,
        },
        element: (
          <MainLayout>
            <Add></Add>
          </MainLayout>
        ),
      },
    ],
  },
  {
    path: "/set",
    meta: {
      title: "设置",
      icon: <RadiusSettingOutlined />,
      role: ["admin"],
    },
    element: (
      <MainLayout>
        <Set></Set>
      </MainLayout>
    ),
  },
  {
    path: "/login",
    meta: {
      title: "登录",
      hidden: true,
    },
    element: <Login></Login>,
  },
  {
    path: "/post",
    meta: {
      title: "详情",
      hidden: true,
    },
    element: <Post></Post>,
  },
  {
    path: "/",
    element: <Navigate to="/home"></Navigate>,
    meta: {
      title: "重定向",
      hidden: true,
    },
  },
];

export interface RouteRowState {
  path: string
  meta: {
    title: string
    icon?: JSX.Element
    hidden?: boolean
    role?: string[]
  }
  element?: JSX.Element 
  children?: RouteRowState[]
}


